<template>
  <div class="app-container">
    <!-- 添加统计信息区域 -->
    <section class="stats-section">
      <div class="stat-card">
        <h3>公司总员工数量</h3>
        <p>{{ totalEmployees }}</p>
        <!-- <p class="description">这是公司总员工数量。</p> -->
      </div>
      <div class="stat-card">
        <h3>待面试</h3>
        <p>{{ newEmployeesToday }}</p>
        <!-- <p class="description">这是待面试的员工数量</p> -->
      </div>
      <div class="stat-card">
        <h3>公司的总资产</h3>
        <p>{{ activeEmployees }}</p>
        <!-- <p class="description">这是公司的总资产</p> -->
      </div>

    </section>

    <!-- 添加图表区域 -->
    <section class="chart-section">
      <div class="chart-card">
        <div ref="echartsLine" class="chart"></div>
        <h3>新增面试趋势折线图</h3>
        <p class="description">显示近七天新增面试的趋势。</p>
      </div>
      <div class="chart-card">
        <div ref="echartsBar" class="chart"></div>
        <h3>各部门员工人数柱状图</h3>
        <p class="description">展示各部门的员工人数。</p>
      </div>
    </section>

    <!-- 新增一个容器来包含面试者评分分布饼图 -->
    <section class="combined-section">
      <div class="chart-card">
        <div ref="echartsPie" class="chart"></div>
        <h3>面试评分分布饼图</h3>
        <p class="description">展示面试者的评分分布情况。</p>
      </div>
      <div class="chart-card">
        <div ref="assetsPie" class="chart" id="assetsPie"></div>
        <h3>资产分布情况饼图</h3>
        <p class="description">展示资产分布情况。</p>
      </div>
    </section>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return {
      totalEmployees: this.getUserCount(),
      newEmployeesToday: this.getWaitingCount(),
      activeEmployees: 0,
      UserCountByDept: this.getDepartmentCount(),
      seniorEmployees: 0,
      totalTrainings: 0,
      trainingParticipantsToday: 0,
      employees: [],
      scoreCount: [],
      excellentCount: 0,
      goodCount: 0,
      commonCount: 0,
      badCount: 0,
      dataList: [],
      addCountList: []
    };
  },
  mounted() {
    this.renderLineChart();
    this.renderBarChart();
    this.renderPieChart();
   this.renderAssetsPieChart();
  },
  created() {
    this.getScoreCount()
    this.getTurnover()
    this.getActiveEmployees()
    // this.renderAssetsPieChart()
  },
  watch: {
    excellentCount(newVal) {
      this.renderPieChart();
    },
    goodCount(newVal) {
      this.renderPieChart();
    },
    commonCount(newVal) {
      this.renderPieChart();
    },
    badCount(newVal) {
      this.renderPieChart();
    },
    dataList(newVal) {
      this.renderLineChart();
    },
    addCountList(newVal) {
      this.renderLineChart();
    },
    UserCountByDept: {
      handler(newVal) {
        if (newVal.length > 0) {
          this.renderBarChart();
        }
      },
      deep: true
    }
  },
  methods: {
    // 获取近七天新增面试
    getTurnover() {
      this.$http({
        url: this.$http.adornUrl(`/interview/interviewRecords/getTurnover`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("后端返回的数据:::", data)
          this.dataList = data.turnover.dataList
          this.addCountList = data.turnover.addCountList
          console.log("dataList数据为:::", this.dataList)
          console.log("addCountList数据为:::", this.addCountList)
        }
      })
    },
    // 获取面试评分
    getScoreCount() {
      this.$http({
        url: this.$http.adornUrl(`/interview/interviewRecords/getScoreCount`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.scoreCount = data.scoreCount
          this.excellentCount = this.scoreCount[0]
          this.goodCount = this.scoreCount[1]
          this.commonCount = this.scoreCount[2]
          this.badCount = this.scoreCount[3]
          console.log('this.excellentCount:', this.excellentCount);  // 查看赋值结果
          console.log('this.goodCount:', this.goodCount);
          console.log('this.commonCount:', this.commonCount);
          console.log('this.badCount:', this.badCount);
        }
      })
    },
    // 获取数据列表
    getUserCount() {
      this.$http({
        url: this.$http.adornUrl('/sys/user/getUserCount'),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.totalEmployees = data.data
          // this.totalPage = data.page.totalCount
          console.log("公司总员工数量：" + data.data)
        }
      })
    },

    //获取待面试的员工数量
    getWaitingCount() {
      this.$http({
        url: this.$http.adornUrl('/interview/interviewRecords/getWaitingCount'),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.newEmployeesToday = data.data
          // this.totalPage = data.page.totalCount
          console.log("待面试的员工数量：" + data.data)
        }
      })
    },

    //资产总数
    getActiveEmployees () {
          this.$http({
            url: this.$http.adornUrl('/assets/info/getAssetsCount'),
            method: 'get',
            params: this.$http.adornParams({
            })
          }).then(({ data }) => {
        if (data && data.code === 0) {
          this.activeEmployees = data.data
        } else {
          console.log('未找到 list 属性')
        }
      })
    },

    //获取各部门员工人数
    getDepartmentCount() {
      this.$http({
        url: this.$http.adornUrl(`/sys/user/getUserCountByDept`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.UserCountByDept = data.data
          console.log("各部门员工人数：" + [this.UserCountByDept])

        }
      })
    },
    async fetchData() {
      // 在这里使用 API 获取数据并更新状态
      const response = await fetch('https://your-hr-api-endpoint');
      const data = await response.json();

      this.totalEmployees = data.totalEmployees;
      this.newEmployeesToday = data.newEmployeesToday;
      this.activeEmployees = data.activeEmployees;
      this.seniorEmployees = data.seniorEmployees;
      this.totalTrainings = data.totalTrainings;
      this.trainingParticipantsToday = data.trainingParticipantsToday;
      this.employees = data.employees;
    },
    renderLineChart() {
      const myLineChart = echarts.init(this.$refs.echartsLine);
      const lineOption = {
        title: {
          text: '新增面试趋势折线图'
        },
        tooltip: {},
        legend: {
          data: ['新增面试']
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '15%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          data: this.dataList,
          axisLabel: {
            interval: 0, // 显示所有标签
            rotate: 45,  // 旋转标签以避免重叠
            margin: 10,  // 标签与轴线的距离
            fontSize: 12 // 标签字体大小
          }
        },
        yAxis: {
          type: 'value', // 设置为数值轴
          min: 0,
          max: 5,
          axisTick:{
            interval: 1
          },
          axisLabel: {
            formatter:function (value){
              return value;
            }
          }
        },
        series: [{
          name: '新增面试',
          type: 'line',
          data: this.addCountList
        }]
      };
      myLineChart.setOption(lineOption);
    },
    renderBarChart() {
      try {
        const myBarChart = echarts.init(this.$refs.echartsBar);
        const barOption = {
          title: {
            text: '各部门员工人数柱状图'
          },
          tooltip: {},
          legend: {
            data: ['人数']
          },
          xAxis: {
            data: ["研发部", "产品部", "市场部", "人力资源部", "财务部", "技术支持部", "行政部"]
          },
          yAxis: {},
          series: [{
            name: '人数',
            type: 'bar',
            data: this.UserCountByDept // 使用获取到的数据
          }]
        };
        myBarChart.setOption(barOption);
      } catch (error) {
        console.error('柱状图渲染失败:', error.message);
      }
    },
    renderPieChart() {
      const myPieChart = echarts.init(this.$refs.echartsPie);
      const pieOption = {
        title: {
          text: '面试评分分布',
          subtext: '绩效比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['优秀', '良好', '一般', '差']
        },
        series: [
          {
            name: '绩效',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: this.excellentCount, name: '优秀' },
              { value: this.goodCount, name: '良好' },
              { value: this.commonCount, name: '一般' },
              { value: this.badCount, name: '差' }
            ]
          }
        ]
      };
      myPieChart.setOption(pieOption);
    },
    renderAssetsPieChart() {
      const pieOption = {
        title: {
          text: '资产分布情况饼图',
          subtext: '占用比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: []
        },
        series: [
          {
            name: '占用比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: []
          }
        ]
      }
      const myChartDom = document.getElementById('assetsPie')
      const myChart = echarts.init(myChartDom)
      myChart.setOption(pieOption)
        this.$http({
          url: this.$http.adornUrl('/assets/info/pielist'),
          method: 'get',
          params: this.$http.adornParams({
          })
        }).then(({ data }) => {
        if (data && data.list) {
          const dataForEcharts = data.list.map(item => ({
            value: item.asset_count,
            name: item.assets_name
          }))
          pieOption.series[0].data = dataForEcharts
          myChart.setOption(pieOption)
        } else {
          console.log('未找到 list 属性')
        }
      })
    }
  }
};
</script>

<style scoped>
.app-container {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  color: #333;
  overflow-y: auto;
}

.stats-section,
.chart-section,
.combined-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* width: 100%; */
  width: 1350px;
  padding: 0 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1 1 calc(33.333% - 10px);
  margin: 5px;
  text-align: center;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #dfe4ea;
}

.chart-card,
.employee-list {
  flex: 1 1 calc(50% - 10px);
  margin: 5px;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  min-height: 300px;
  overflow-y: auto;
  border: 1px solid #dfe4ea;
}

.chart {
  width: 100%;
  height: 250px;
}

.employee-list table {
  width: 100%;
  border-collapse: collapse;
}

.employee-list th,
.employee-list td {
  padding: 10px;
  border: 1px solid #dfe4ea;
  text-align: left;
}

.employee-list th {
  background-color: #eef4ff;
  font-weight: bold;
}

.stat-card h3,
.chart-card h3,
.employee-list h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.stat-card b,
.chart-card b {
  font-size: 20px;
  color: #333;
}

.chart-card p.description,
.employee-list p.description {
  font-size: 14px;
  color: #777;
  margin-top: 10px;
}

/* 湖蓝色主题颜色 */
.stat-card:hover,
.chart-card:hover,
.employee-list:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-color: #8bc34a;
}

.stat-card h3,
.chart-card h3,
.employee-list h2 {
  color: #80e5f7;
}

.stat-card b,
.chart-card b {
  color: #80e5f7;
}
</style>
